<template>
  <a-modal
    v-model:visible="visible"
    centered
    title="选择审批流程"
    width="100%"
    :confirm-loading="confirmLoading"
    :mask-closable="false"
    :keyboard="false"
    wrap-class-name="tn-model-full-scroll full-scroll-1200"
  >
    <template #footer>
      <a-button key="back" @click="visible = false">取消</a-button>
      <a-button key="submit" type="primary" ghost :loading="confirmLoading" @click="handleOk(true)"
        >使用空白模板</a-button
      >
      <a-button key="submit" type="primary" :loading="confirmLoading" @click="handleOk(false)">确定</a-button>
    </template>

    <a-layout class="select_template_layout">
      <a-layout-header v-if="hasSearch" class="select_template_search">
        <a-form :model="form" layout="inline" :label-width="100" class="mb-4">
          <a-form-item :rules="[{ required: true, message: '请选择试验类型!', trigger: 'change' }]">
            <DictFormItem
              v-model:value="form.testType"
              style="width: 200px"
              placeholder="请选择试验类型"
              app-code="CONFIG"
              flag="PROJECT_TYPE"
              :is-http="true"
              class="gray"
              @change="getFlowTemplateList"
            />
          </a-form-item>

          <a-form-item :rules="[{ required: true, message: '请选择流程类型', trigger: 'change' }]">
            <DictFormItem
              v-model:value="form.flowType"
              style="width: 200px"
              placeholder="请选择流程类型"
              app-code="CTMS"
              flag="PROCESS_TYPE"
              :is-http="true"
              class="gray"
              @change="getFlowTemplateList"
            />
          </a-form-item>
          <a-form-item>
            <TnSearchInput
              v-model:value="form.flowName"
              placeholder="按审批流名称模糊搜索"
              class="gray"
              @search="getFlowTemplateList"
            />
          </a-form-item>
        </a-form>
      </a-layout-header>
      <a-layout v-if="ProgressTemplateList.length">
        <a-layout-sider :width="240" class="select_template_sider">
          <a-card class="full-card" :body-style="{ padding: 0, overflow: 'auto' }" :bordered="false" title="表单名称">
            <div class="show_list_ul">
              <div
                v-for="item in ProgressTemplateList"
                :key="item.sopFlowId"
                :class="['show_list_li', activeKey === item.sopFlowId ? 'active' : '']"
                @click="changeTem(item)"
              >
                <customShowTooltips :max-width="200" :content="item.flowName"></customShowTooltips>
              </div>
            </div>
          </a-card>
        </a-layout-sider>
        <a-layout-content class="select_template_content">
          <a-card class="full-card">
            <reviewFlow
              :key="activeKey"
              :flow-id="tempSopFlowId"
              :canvas-data="tempCanvas"
              :hide-sign-setting="hideSignSetting"
            />
          </a-card>
        </a-layout-content>
      </a-layout>
      <IcpEmpty v-if="!ProgressTemplateList.length"></IcpEmpty>
    </a-layout>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  getFlowTemplate,
  chooseFlow,
  ctmsChooseFlow,
  useBlankFlowTemplate,
  ctmsUseBlankFlowTemplate
} from '@@/api/flow'
import reviewFlow from '@@/components/ReviewFlow/index.vue'
// import { experimentTypeOptions } from './index'

const props = defineProps<{
  taskId?: string | undefined
  entryType?: number | string | undefined
  templateType?: number
  hasSearch?: boolean
  hideSignSetting?: boolean
  tag?: any
  flowType?: any
}>()

const emits = defineEmits(['submit'])

const visible = ref(false)
const ProgressTemplateList = ref<any>([])
const activeKey = ref('')
const confirmLoading = ref<boolean>(false)
const form = ref({
  flowType: undefined,
  testType: undefined,
  flowName: undefined
})

const show = () => {
  visible.value = true
  Object.assign(form.value, {
    flowType: props.flowType
  })
  getFlowTemplateList()
}

const getFlowTemplateList = () => {
  const params = Object.assign(
    {
      templateType: props.templateType
    },
    form.value
  )
  getFlowTemplate(params).then((res) => {
    const data = res || []
    ProgressTemplateList.value = data
    activeKey.value = ProgressTemplateList.value[0]?.sopFlowId
    tempCanvas.value = ProgressTemplateList.value[0]?.canvas
    tempSopFlowId.value = ProgressTemplateList.value[0]?.sopFlowId
  })
}

/**
 * @description: 选择审批流程
 * @param {isEmpty} 是否使用空白模板 true 是 false 否
 */
const handleOk = (isEmpty) => {
  confirmLoading.value = true
  const fn = isEmpty
    ? props.entryType === 4
      ? ctmsUseBlankFlowTemplate
      : useBlankFlowTemplate
    : props.entryType === 4
    ? ctmsChooseFlow
    : chooseFlow
  fn({
    id: activeKey.value,
    entryType: props.entryType || 4,
    tag: props.tag,
    taskId: props.taskId
  })
    .then(() => {
      confirmLoading.value = false
      emits('submit', isEmpty)
      visible.value = false
    })
    .catch(() => {
      confirmLoading.value = false
    })
}
const tempCanvas = ref()
const tempSopFlowId = ref()
const changeTem = (item) => {
  activeKey.value = item.sopFlowId
  tempCanvas.value = item.canvas
  tempSopFlowId.value = item.sopFlowId
}
defineExpose({
  show
})
</script>

<style lang="less">
.ant-tabs > .ant-tabs-nav .ant-tabs-nav-operations {
  display: none !important;
}
</style>
